<template>
    <div id="second">
      <p>我是小弟组件</p>
      <!-- 如下代码$store.state重复编辑量比较多，降低开发效率
      下边要引入mapState机制，进而简化如下操作
      -->
      <!-- <p>count的值为：{{$store.state.count}}</p>
      <p>count的值为：{{$store.state.count}}</p>
      <p>count1的值为：{{$store.state.count1}}</p>
      <p>count1的值为：{{$store.state.count1}}</p> -->

      <!-- 经过mapState处理，各个vuex成员可以像普通的"计算属性"一样被直接使用
        提高了开发效率
      -->
      <p>count的值为：
        <!--类似访问普通data成员一样，访问vuex数据-->
        {{count}}--
        {{count}}--
        {{count1}}--
        {{count1}}--
      </p>
      <p>
        <button @click="mod(10)">修改count</button>
        <button @click="mod(20)">修改count</button>
        <button @click="mod(30)">修改count</button>
      </p>
    </div>
</template>

<script>
// 导入mapState、mapMutations模块
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'second',
  // 要在"计算属性"中应用mapState
  computed: {
    // ... 展开运算符
    ...mapState(['count', 'count1'])
  },
  methods: {
    // 参数数组元素就是 mutations成员名称
    ...mapMutations(['mod'])
    /**
      mapMutations 函数本质为如下：

      function mapMutations(arr){
        return {
          arr[0]:function(arg){
            return this.$store.commit(arr[0],arg)
          },
          arr[1]:function(arg){
            return this.$store.commit(arr[1],arg)
          }
          ……
        }
      }
      */
    // 上述代码本质如下：
    // mod (arg) {
    //   this.$store.commit('mod', arg)
    // }
  }
}
</script>

<style lang="less" scoped>
#second{
  width: 350px;
  height: 200px;
  border:2px solid green;
  margin-top:10px;
}
</style>
